<template>
    <div class="selectionPage">
        <SelectionPageNav />
        <div class="page_list">
            <ul class="list_box">
                <li class="listIfo_content" v-for="(item,index) in dataList" :key="index">
                    <div class="data_head">
                        <img class="data_img" :src="item.PublisherImage" alt="">
                        <span class="data_name">{{item.PublisherName}}</span>
                    </div>
                    <h1 class="data_intr">{{item.ArticleTitle}}</h1>
                    <ul class="imgs_list">
                        <li v-for="(ite,idx) in item.RecommendArticlesItem" :key="idx">
                            <img :src="ite.Image" alt="">
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {getSelectionData} from '../api/getgoods'
    import SelectionPageNav from '../components/SelectionPageNav.vue'
    export default {
        data(){
            return{
                dataList:[],
                id:0
            }
        },
        created(){//发送请求获取商品介绍数据
            //获取状态机的页面ID
            this.id=this.$store.state.SelectionPage.selectionPageID
            getSelectionData(this.id).then(res=>{//请求页面数据
                this.dataList=res.data.Data
            })
        },
        computed: {
            getDataIdx() {//获取页面数据的下标
               return this.$store.getters['SelectionPage/getSelectionId']
            },
            
        },
        watch: {
            getDataIdx(newValue, oldValue) {
                 getSelectionData(newValue).then(res=>{//请求页面数据
                    this.dataList=res.data.Data
                })
            }
        },
        components:{
            SelectionPageNav
        }
    }
</script>
<style lang="css" src="../assets/css/SelectionPage.css" scoped></style>
<style lang="sass" scoped>

</style>